<!Doctype html>
<html lang="zh-CN">
<head>
	<title>景点列表</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<style>
		*{
		margin:0px;
		padding:0px;
		}
		div,ul{
			background-color:#fff;
		}
	</style>
	<script src="./js/jquery.min.js">
	</script>
</head>
<body style="background-color:grey;overflow:scroll;">
	<div style="border:0px solid #000;height:2.5rem;line-height:2.5rem;z-index:2;background-color:grey;position:relative;">
		<span style="height:2.5rem;z-index:1;position:absolute;
		margin-right:1rem;vertical-align:middle;border:0px solid red;">
			<img style="width:1rem;height:1.5rem;vertical-align:middle;border:0;" src="./images/top_back.png"/>
		</span>
		<span id="cat" class="btn" style="height:2.5rem;z-index:1;position:absolute;right:0px;
		margin-left:1rem;vertical-align:middle;border:0px solid red;">
			<img style="width:1rem;height:1.5rem;vertical-align:middle;border:0;" src="./images/top_category.png"/>
		</span>
		<div style="border:0px solid blue;height:2.5rem;position:absolute;width:100%;overflow:hidden">
			<input placeholder="输入目的地/景点/酒店/自由行/......" style="width:100%;height:100%;border:0px solid grey;
			z-index:2;padding:0 2rem;word-spacing: 2rem;background-color:grey;"/>
		</div>
	</div>
	<ul class="popup" style="display:none;list-style:none;
	position:absolute;top:40px;left:0px;right:0px;text-align:center;z-index:2;">
		<li style="border:1px solid #e0e0e0;">全部主题</li>
		<li style="border:1px solid #e0e0e0;">山水景观</li>
		<li style="border:1px solid #e0e0e0;">温泉度假</li>
		<li style="border:1px solid #e0e0e0;">酷夏漂流</li>
		<li style="border:1px solid #e0e0e0;">亲子乐园</li>
	</ul>
	<img src="./images/t_4.jpg" style="border:0px;height: auto; width:100%;"/>
	<ul style="list-style:none;border:0px solid #000;height:2.8rem;margin-top:-3px;position:relative;">
		<li style="float:left;width:49.5%;border:0px solid #000;height:2.8rem;border-right:1px solid grey; 
		line-height:2.8rem;text-align:center;vertical-align:middle;">
			<img src="./images/jd_arr1.png" style="vertical-align: middle;border:0;">
			热门景点
		</li>
		<ul class="popup" style="display:none;list-style:none;
		position:absolute;top:100px;left:0px;right:0px;">
		<li style="border-bottom:2px solid #87cefa;height:40px;line-height:40px;color:red;">
		全部地区
		<img src="./images/arr_zf_click.png" style="width:2rem;height:2rem;vertical-align:middle;display:inline-block;right:0px;position:absolute;border:0px;"/>
		</li>
		<li style="border-bottom:1px solid #e0e0e0;height:40px;line-height:40px;">鹿城区</li>
		<li style="border-bottom:1px solid #e0e0e0;height:40px;line-height:40px;">龙湾区</li>
		<li style="border-bottom:1px solid #e0e0e0;height:40px;line-height:40px;">瓯海区</li>
	</ul>
		<li style="float:left;width:49.5%;border:0px solid #000;height:2.8rem;
		line-height:2.8rem;text-align:center;vertical-align:middle;">
			<img src="./images/jd_arr2.png" style="vertical-align: middle;border:0;">
			我的身边
		</li>
	</ul>
	
	<ul style="list-style:none;border:0px solid #000;height:2.8rem;margin-top:0.5rem;">
		<li id="cat2" class="btn" style="float:left;width:33%;border:0px solid #000;height:2.8rem;border-right:1px solid grey; 
		line-height:2.8rem;text-align:center;vertical-align:middle;">
			位置区域
			<img src="./images/channelBg.png" style="vertical-align: middle;border:0;width:0.8rem;height:0.8rem;">
		</li>
		<li style="float:left;width:33%;border:0px solid #000;height:2.8rem;border-right:1px solid grey; 
		line-height:2.8rem;text-align:center;vertical-align:middle;">
			达人推荐
			<img src="./images/channelBg.png" style="vertical-align: middle;border:0;width:0.8rem;height:0.8rem;">
		</li>
		<li style="float:left;width:32%;border:0px solid #000;height:2.8rem;
		line-height:2.8rem;text-align:center;">
			全部主题
			<img src="./images/channelBg.png" style="border:0;width:0.8rem;height:0.8rem;">
		</li>
	</ul>
	
	<div style="list-style:none;border:0px solid #000;height:6rem;margin-top:0.1rem;">
		<div style="float:left;width:33%;border:0px solid #000;height:6rem;border-right:0px solid grey; 
		line-height:6rem;text-align:center;vertical-align:middle;">
			<img src="./images/jd_pic.jpg" style="width:5.5rem;height:5.5rem;border:0;vertical-align: middle;"/>
		</div>
		<div style="float:left;width:45%;border:0px solid #000;height:6rem;border-right:0px solid grey;">
			<p style="margin-top:0.5rem;">洞头望海楼景区</p>
			<p style="display:inline;background-color:orange;color:#fff;">返</p>
			<p style="display:inline;background-color:blue;color:#fff;">券</p>
			<p>风景名胜</p>
			<p style="color:grey;">已售出2008</p>
		</div>
		<div style="float:left;width:20%;border:0px solid #000;height:6rem;line-height:2rem;text-align:center;">
			<font style="font-size:0.5rem;color:orange;">￥</font><font style="font-size:1rem;color:orange;">100</font><font style="font-size:0.5rem;color:grey;">起</font>
			<br/>
			<s>￥240</s>
		</div>
	</div>
	
	<div style="list-style:none;border:0px solid #000;height:6rem;margin-top:0.1rem;">
		<div style="float:left;width:33%;border:0px solid #000;height:6rem;border-right:0px solid grey; 
		line-height:6rem;text-align:center;vertical-align:middle;">
			<img src="./images/jd_pic.jpg" style="width:5.5rem;height:5.5rem;border:0;vertical-align: middle;"/>
		</div>
		<div style="float:left;width:45%;border:0px solid #000;height:6rem;border-right:0px solid grey;">
			<p style="margin-top:0.5rem;">洞头望海楼景区</p>
			<p style="display:inline;background-color:orange;color:#fff;">返</p>
			<p style="display:inline;background-color:blue;color:#fff;">券</p>
			<p>风景名胜</p>
			<p style="color:grey;">已售出2008</p>
		</div>
		<div style="float:left;width:20%;border:0px solid #000;height:6rem;line-height:2rem;text-align:center;">
			<font style="font-size:0.5rem;color:orange;">￥</font><font style="font-size:1rem;color:orange;">100</font><font style="font-size:0.5rem;color:grey;">起</font>
			<br/>
			<s>￥240</s>
		</div>
	</div>
	
	<div style="list-style:none;border:0px solid #000;height:6rem;margin-top:0.1rem;">
		<div style="float:left;width:33%;border:0px solid #000;height:6rem;border-right:0px solid grey; 
		line-height:6rem;text-align:center;vertical-align:middle;">
			<img src="./images/jd_pic.jpg" style="width:5.5rem;height:5.5rem;border:0;vertical-align: middle;"/>
		</div>
		<div style="float:left;width:45%;border:0px solid #000;height:6rem;border-right:0px solid grey;">
			<p style="margin-top:0.5rem;">洞头望海楼景区</p>
			<p style="display:inline;background-color:orange;color:#fff;">返</p>
			<p style="display:inline;background-color:blue;color:#fff;">券</p>
			<p>风景名胜</p>
			<p style="color:grey;">已售出2008</p>
		</div>
		<div style="float:left;width:20%;border:0px solid #000;height:6rem;line-height:2rem;text-align:center;">
			<font style="font-size:0.5rem;color:orange;">￥</font><font style="font-size:1rem;color:orange;">100</font><font style="font-size:0.5rem;color:grey;">起</font>
			<br/>
			<s>￥240</s>
		</div>
	</div>
	
	<div style="height:3rem;line-height:3rem;text-align:center;vertical-align:middle;margin-top:0.1rem;">
		点击查看更多...
	</div>
	
	<div style="margin-top:0.1rem;text-align:center;">
		<div style="width:25%;border:0px solid #000;float:left;">
			<img src="./images/bottom_home_click.png"><br/>
			首页
		</div>
		<div style="width:25%;border:0px solid #000;float:left;">
			<img src="./images/bottom_find.png"><br/>
			发现
		</div>
		<div style="width:25%;border:0px solid #000;float:left;">
			<img src="./images/bottom_shop.png"><br/>
			购物车
		</div>
		<div style="width:25%;border:0px solid #000;float:left;">
			<img src="./images/bottom_mine.png"><br/>
			我的
		</div>
	</div>
	<div id="block_screen" style="bottom:0;width:100%;opacity:0.8;position:fixed;z-index:1;background-color:#000;display:none">
	</div>
</body>
	<script>
	/*
			W3C中的标准--addEventListener
			1.绑定在哪个事件上?click,load,change,blur,focus,nouseover...
			语法:xxxDomObject.addEventListener();
			3.什么方式监听执行事件函数?捕捉，冒泡
			
			注意细节：
			1.事件名，一律不带on
			2.绑定事件函数中的“this”指绑定该事件的对象
			3.执行顺序，是按照绑定顺序来执行的
		*/
		//var node=document.getElementById("cat");
		//var node=$("#cat");
		//var p=window.document.getElementsByClassName("popup")[0];
		//var m=window.document.getElementById("block_screen");
		/* function clickhandler(){
			p.style.display=(p.style.display=="block"?"none":"block");
			m.style.display=(m.style.display=="block"?"none":"block");
		} */
		$(function(){
			$(".btn").click(function(){
				if($(this).attr("id")=="cat"){
						if($(".popup:first").css("display")=="none"){
						 $(".popup:first").css("display","block");
						 $(".popup").eq(1).css("display","none");
						 $(".popup").eq(1).css("z-index","0");
						 $("#block_screen").css("top","0px");
						 $("#block_screen").css("display","block");
					}else {
						$(".popup:first").css("display","none");
						$("#block_screen").css("display","none");
					}
				}else if($(this).attr("id")=="cat2"){
					if($(".popup").eq(1).css("display")=="none"){
						 $(".popup").eq(1).css("display","block");
						 $(".popup").eq(1).css("z-index","2");
						 $("#block_screen").css("top",$(".popup").eq(1).offset().top);
						 $("#block_screen").css("display","block");
					}else {
						$(".popup").eq(1).css("display","none");
						$(".popup").eq(1).css("z-index","0");
						$("#block_screen").css("display","none");
					}
				}
			});
		})
		//node.attachEvent("onclick","clickhandler");
		//node.addEventListener("click","clickhandler");
		//$("#cat").addEventListener("click",clickhandler);
		/*function menu_visible(){
			var obj=document.getElementById("menu");
			obj.style["display"]=(obj.style["display"]==999?-999:999);
		}*/
	</script>
</html>